<template>
<view class="layout">
<classifyHead title="贵茶交"/>
<!-- 暂无账户 -->
<view class="content" v-if="isExistAccount">
    <view class="name">您还未绑定贵交账号!</view>
    <view class="name" style="font-size: 32rpx;margin-top: 50rpx;">如果已有贵交账号</view>
    <button class="btn" @click="showModal = true">去绑定</button>
</view>

<!-- 已有账户 -->
<view class="content" v-else>
    <view class="name">您已绑定贵交账号</view>
    <view class="name" style="font-size: 32rpx;margin-top: 30rpx;">{{ accountId }}</view>
</view>
<!-- 弹窗 -->
 <view class="container">
    <!-- 页面内容（示例按钮） -->
    <view class="main-content" style="padding: 60rpx; text-align: center;">
    </view>

    <!-- 弹窗遮罩层 -->
    <view class="modal-overlay" v-if="showModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <!-- 标题 -->
        <view class="modal-title">绑定贵交账号</view>

        <!-- 输入框 -->
        <view class="input-container">
          <input
            type="text"
            placeholder="请输入贵交账号ID"
            v-model="accountId"
            class="input-field"
            placeholder-style="color: #ccc; font-size: 14px;"
          />
        </view>

        <!-- 按钮组 -->
        <view class="btn-group">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-confirm" @click="confirmBind">确定</button>
        </view>
      </view>
    </view>
  </view>


<!-- 成功提示 -->
   <view v-if="successShow" class="success-overlay">
    <view class="success-box">
      <image class="success-icon" src="../../static/OkIcon.png" mode="aspectFit" />
      <text class="success-text">绑定成功！</text>
    </view>
  </view>

  <!-- 失败提示 -->
     <view v-if="failShow" class="success-overlay">
    <view class="success-box">
      <image class="success-icon" src="../../static/NoIcon.png" mode="aspectFit" />
      <text class="success-text">绑定失败！</text>
    </view>
  </view>
</view>
</template>

<script setup>
import classifyHead from '@/components/classifyHead.vue';
import { ref,onMounted } from 'vue';
import {apiGetAccountInfo,apiGcjAccountBind} from '@/api/myScore';

// 判断是否已绑定账号,默认未绑定
const isExistAccount = ref(true);
// 用户输入的账号ID
const accountId = ref('');
onMounted(async () => {

// 只有从“贵茶交”入口进来才走这个逻辑
    const res = await apiGetAccountInfo({});
  console.log('获取贵茶交账户信息成功:', res);
    if (res.code === 200) {
      // 已绑定账户
      isExistAccount.value = false;

    } else if (res.code === 201) {
      // 未绑定账户
      isExistAccount.value = true;

  }
});

//失败提示
const failShow = ref(false);
//成功提示
const successShow = ref(false);
// 弹窗显示控制
const showModal = ref(false);

// 取消绑定
const closeModal = () => {
  showModal.value = false;
  // 显示失败提示
  failShow.value = true;
  setTimeout(() => {
    failShow.value = false;
  }, 1500);
};

// 确定绑定
const confirmBind = async() => {
  if (!accountId.value.trim()) {
    uni.showToast({
      title: '请输入账号ID',
      icon: 'none',
      duration: 1500
    });
    return;
  }
const bindRes = await apiGcjAccountBind({
    gcjAccount: accountId.value,
  });
  if(bindRes.code === 200){
    
// 模拟绑定成功
  console.log('正在绑定账号ID:', accountId.value);

  // 关闭弹窗
  showModal.value = false;

  // 显示成功提示
  successShow.value = true;

  // 1.5秒后自动隐藏
  setTimeout(() => {
    successShow.value = false;
    isExistAccount.value = false; // 切换为已绑定状态
  }, 1500);
  }
  
};
</script>

<style lang="scss" scoped>
.layout{
    .content{
        width:calc( 100% - 100rpx);
        height: 350rpx;
        margin:20rpx 40rpx;
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
        border-radius: 30rpx;
        padding-top: 20rpx;
        .name{
            font-size: 50rpx;
            text-align: center;
            width: 100%;
            
        }
        .btn{
            width: 240rpx;
            height:90rpx;
            background:#5756b3 ;
            display: flex;
            justify-content: center;
            align-items: center;
            color: aliceblue;
            margin-top: 30rpx;
        }
    }

.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

/* 弹窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

/* 弹窗内容 */
.modal-content {
  width: 80%;
  max-width: 360px;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* 标题 */
.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
}

/* 输入框容器 */
.input-container {
  margin-bottom: 40rpx;
}

.input-field {
  width: 90%;
  padding: 20rpx 30rpx;
  border: 1px solid #ddd;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 30rpx;
}

/* 按钮组 */
.btn-group {
  display: flex;
  gap: 30rpx;
  justify-content: center;
}

/* 取消按钮 */
.btn-cancel {
  padding: 20rpx 40rpx;
  border: 1px solid #ccc;
  border-radius: 40rpx;
  background-color: #fff;
  color: #666;
  font-size: 28rpx;
  min-width: 160rpx;
  line-height: 1.5;
}

.btn-cancel::after {
  border: none;
}

/* 确定按钮 */
.btn-confirm {
  padding: 20rpx 40rpx;
  border: none;
  border-radius: 40rpx;
  background-color: #5756b3;
  color: #fff;
  font-size: 28rpx;
  min-width: 160rpx;
  line-height: 1.5;
}

.btn-confirm::after {
  border: none;
}

/* 3. 成功提示样式（不变） */
.success-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-box {
  width: 400rpx;
  padding: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}

.success-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
}
</style>